<template>
  <div class="typeNav">
    <div class="container">
      <div @mouseenter="showEnter" @mouseleave="showLeave">
        <h2 class="all">全部商品分类</h2>
        <transition name="sort">
          <div class="sort" v-show="isShowTypeNav">
            <div class="menuL" @click="goSearch">
              <div class="item" v-for="c1 in categoryList" :key="c1.categoryId">
                <h3>
                  <a
                    :data-categoryName="c1.categoryName"
                    :data-categoryId1="c1.categoryId"
                    >{{ c1.categoryName }}</a
                  >
                </h3>
                <div class="menuR clearfix">
                  <div class="subitem">
                    <dl
                      class="fore"
                      v-for="c2 in c1.categoryChild"
                      :key="c2.categoryId"
                    >
                      <dt>
                        <a
                          :data-categoryName="c2.categoryName"
                          :data-categoryId2="c2.categoryId"
                          >{{ c2.categoryName }}</a
                        >
                      </dt>
                      <dd>
                        <span
                          v-for="c3 in c2.categoryChild.slice(0, 10)"
                          :key="c3.categoryId"
                        >
                          <a
                            :data-categoryName="c3.categoryName"
                            :data-categoryId3="c3.categoryId"
                            >{{ c3.categoryName }}</a
                          >
                        </span>
                      </dd>
                    </dl>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </transition>
      </div>
      <nav class="nav">
        <a>服装城</a>
        <a>美妆馆</a>
        <a>尚品汇超市</a>
        <a>全球购</a>
        <a>闪购</a>
        <a>团购</a>
        <a>有趣</a>
        <a>秒杀</a>
      </nav>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";

export default {
  name: "TypeNav",
  data() {
    return {
      isShowTypeNav: true,
    };
  },
  computed: {
    ...mapState({
      categoryList: (state) => state.ModuleHome.categoryList.slice(0, 11),
    }),
  },
  mounted() {
    // 通过路由判断是否显示isShowTypeNav
    if (this.$route.path != "/home") {
      this.isShowTypeNav = false;
    }
  },
  methods: {
    // 利用事件委派点击子元素进行路由跳转
    goSearch(e) {
      let element = e.target;
      // 判断是否需要跳转则看元素是否有categoryname，判断是几级分类看是id几
      let { categoryname, categoryid1, categoryid2, categoryid3 } = element.dataset;

      if (categoryname) {
        // 整理路由跳转的参数
        let location = { name: "Search" };
        let query = { categoryName: categoryname };

        if (categoryid1) {
          query.category1Id = categoryid1;
        } else if (categoryid2) {
          query.category2Id = categoryid2;
        } else {
          query.category3Id = categoryid3;
        }
        // 整理参数并合并
        // 点击typeNav应该去除搜索过的关键词keyWord

        // location.params = this.$route.params
        location.query = query;
        location.params = this.$route.params
        // location.query.trademark = this.$route.trademark
        // 路由跳转
        this.$router.push(location);
        // 根据不同的参数在vuex中获取不同的数据
        this.$emit('typeNavClick', {...location.query})
        // this.$store.dispatch("searchList", {...location.query})
      }
      // 点击三级列表时利用子传父通知search组件隐藏品牌面包屑
      // this.$emit("handleTrademark")
    },
    // 鼠标移入,展示三级列表
    showEnter() {
      if (this.$route.path == "/home") return;
      this.isShowTypeNav = true;
    },
    // 鼠标离开,隐藏三级列表
    showLeave() {
      if (this.$route.path == "/home") return;
      this.isShowTypeNav = false;
    },
  },
};
</script>

<style scoped lang="less">
.typeNav {
  border-bottom: 2px solid #e1251b;
  a {
    cursor: pointer;
  }

  .container {
    width: 1200px;
    margin: 0 auto;
    display: flex;
    position: relative;
    // height: 480px;

    .all {
      width: 210px;
      height: 45px;
      background-color: #e1251b;
      line-height: 45px;
      text-align: center;
      color: #fff;
      font-size: 14px;
      font-weight: bold;
    }

    .nav {
      flex: 0.8;
      display: flex;
      justify-content: space-evenly;
      line-height: 45px;
    }
  }
  .sort {
    left: 0;
    top: 45px;
    width: 210px;
    height: 461px;
    position: absolute;
    background: #fafafa;
    z-index: 999;

    .menuL {
      h3 {
        line-height: 40px;
        font-size: 14px;
        font-weight: 400;
        overflow: hidden;
        padding: 0 20px;
        margin: 0;
      }

      .menuR {
        display: none;
        position: absolute;
        width: 734px;
        min-height: 460px;
        background: #f7f7f7;
        left: 210px;
        border: 1px solid #ddd;
        top: 0;
        z-index: 9999 !important;

        .subitem {
          float: left;
          width: 650px;
          padding: 0 4px 0 8px;
          font-size: 12px;

          dl dd {
            float: left;
            // min-width: 415px;
            padding: 3px 0 0;
            overflow: hidden;
          }

          .fore {
            display: flex;
            padding: 8px 0;
          }

          dl dt {
            line-height: 22px;
            text-align: right;
            padding: 3px 6px 0 0;
            font-weight: 700;
            min-width: 60px;
          }

          dd span {
            float: left;
            height: 14px;
            line-height: 14px;
            padding: 0 8px;
            margin-top: 5px;
            border-left: 1px solid #ccc;
          }
        }
      }
      .item:hover {
        .menuR {
          display: block;
        }
        h3 {
          background: #e1251b;
          font-weight: bold;
          cursor: pointer;
        }
        h3 a {
          color: #fff;
        }
      }
    }
  }
  .sort-enter-active,
  .sort-leave-active {
    // height: 461px;
    // transition: all .5s;
    transition: opacity .5s;
  }
  // 进入开始状态
  .sort-enter, .sort-leave-to /* .fade-leave-active below version 2.1.8 */ {
    // height: 0px;
    opacity: 0;
  }
}
</style>
